<template>
  <div class="gather_duty">
    <div class="gather_duty_title">
      <div class="duty_title_left">
        <van-dropdown-menu>
          <van-dropdown-item v-model="yearData" :options="yearOptions" @change="yearChange" />
          <van-dropdown-item v-model="monthData" :options="monthOptions" @change="monthChange" />
        </van-dropdown-menu>
      </div>
      <div class="duty_title_center">
        <div>销假：</div>
        <van-dropdown-menu>
          <van-dropdown-item v-model="backType" :options="backTypeOptions" @change="backChange" />
        </van-dropdown-menu>
      </div>
    </div>
    <div class="gather_main">
      <div class="gather_statics">
        <div class="head">
          <span class="gather_main_title">
            <van-dropdown-menu>
              <van-dropdown-item v-model="holidayData" :options="holidayOptions" @change="holidayChange" />
            </van-dropdown-menu>
          </span>
          <span class="one_count">{{ dutyStaticsOne.leaveDays }}天</span>
          <div class="icon">
            <span class="refresh" @click="refreshFilter">重置</span>
            <i class="iconfont iconshaixuanguolv" :class="{ choose_i: filterStr }" @click="showFilter = true"></i>
          </div>
        </div>
        <div class="statics_box" v-if="listDate.length > 0">
          <div class="statics_info_one" v-for="(oneInfo, index) in listDate" :key="index">
            <div class="infos_one_gather" @click="goDetail(oneInfo)">
              <p>
                <span class="boder_circle"></span>
                {{ moment(oneInfo.startTime).format('MM月DD日 HH:mm') }}-{{
                  moment(oneInfo.endTime).format('MM月DD日 HH:mm')
                }}
              </p>
              <p class="gather_status extra">
                <span class="detail">{{ oneInfo.leaveTypeName }} {{ oneInfo.days }}天/{{ oneInfo.hours }}小时</span>
                <span class="desc">{{ oneInfo.isCanceled === '1' ? '已销假' : '未销假' }}</span>
              </p>
            </div>
          </div>
        </div>
        <van-empty v-else description="暂无数据" />
      </div>
    </div>

    <van-popup v-model="showFilter" round position="bottom" class="filter_pop">
      <div class="head">
        <div class="cancle" @click="showFilter = false">取消</div>
        <div class="title">选择{{ activeStatusInfo.text }}类型</div>
        <div class="sure" @click="onConfirmFil">确定</div>
      </div>
      <div class="filter_list" v-if="filterList.length > 0">
        <van-radio-group v-model="filterStr">
          <van-radio
            :name="items.leaveId"
            v-for="items in filterList"
            :key="items.leaveId"
            ref="checkboxes"
            @click="filterClick(items)">
            <template #icon="props">
              <div :class="['li', { li_choose: props.checked }]">{{ items.leaveName }}</div>
            </template>
          </van-radio>
        </van-radio-group>
      </div>
      <van-empty v-else description="暂无数据" />
    </van-popup>
  </div>
</template>

<script>
import { getSearchTimeList, getTypeList, getUserStatisticsDetail, getUserStatisticsSum } from '@api/api-attendance.js'
import moment from 'moment'
moment.locale('zh-cn')
export default {
  name: 'StaticsGatherMan',
  components: {},
  data() {
    return {
      moment: moment,

      showFilter: false, //是否展示时间弹出层
      loading: false,
      finished: false,
      listDate: [],
      tablePage: {
        currentPage: 1,
        pageSize: 20,
        totalResult: 0,
      },
      activeStatusInfo: {},
      filterList: [],
      filterActiveList: [],
      filterStr: '',
      timeList: [],
      yearData: '',
      monthData: '',
      yearOptions: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      monthOptions: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
      backTypeOptions: [
        { text: '全部', value: '' },
        { text: '已销假', value: '1' },
        { text: '未销假', value: '0' },
      ],
      backType: '',
      holidayOptions: [],
      holidayData: '',
      dutyStaticsOne: {},
    }
  },
  created() {
    this.getSearchTimeList()
    this.getTypeList()
    if (sessionStorage.getItem('staticsInfo')) {
      Object.assign(this.$data, JSON.parse(sessionStorage.getItem('staticsInfo')))
    } else {
      this.getPersonTable()
    }
  },
  mounted() {},
  methods: {
    //获取个人列表
    getPersonTable() {
      if (!this.yearData || !this.holidayData) return
      const month1 = this.monthData ? this.monthData : '01'
      const timeS = this.yearData + '-' + month1
      const month2 = this.monthData ? this.monthData : '12'
      const timeE = this.yearData + '-' + month2
      const startTime = moment(timeS).startOf('month').format('YYYY-MM-DD')
      const endTime = moment(timeE).endOf('month').format('YYYY-MM-DD')
      const param = {
        startTime: startTime,
        endTime: endTime,
        type: this.holidayData || '0',
        orgId: '',
        userId: '',
        leaveId: this.filterStr || '',
        isLeaveCancel: this.backType,
      }
      getUserStatisticsSum({
        startTime: startTime,
        endTime: endTime,
      }).then(res => {
        if (res.status === 200) {
          this.dutyStaticsOne = res.data
        }
      })
      getUserStatisticsDetail({
        currentPage: 1,
        pageSize: 1000,
        param: param,
      }).then(res => {
        if (res.status === 200) {
          this.listDate = res.data.content
          this.tablePage.currentPage++
          this.tablePage.totalResult = res.data.totalSize
          if (this.listDate.length === this.tablePage.totalResult) {
            this.finished = true
          }
        }
      })
    },
    onConfirmFil() {
      this.getPersonTable()
      this.showFilter = false
    },
    goDetail(info) {
      if (['7', '8', '9'].includes(info.checkType)) {
        this.$router.push({
          path: '/detailOutDuty',
          query: {
            id: info.dailyId,
            formId: info.formId,
            processInstanceId: info.processInstanceId,
            type: info.checkType,
          },
        })
        sessionStorage.setItem('staticsInfo', JSON.stringify(this.$data))
      }
    },
    filterClick(item) {},
    refreshFilter() {
      this.filterStr = ''
      this.getPersonTable()
    },
    getSearchTimeList() {
      getSearchTimeList().then(res => {
        if (res.status === 200) {
          this.timeList = res.data
          const arr = []
          res.data.forEach(item => {
            const arr2 = []
            if (item.monthList.length) {
              item.monthList.forEach(li => {
                arr2.push({
                  text: li.month + '月',
                  value: li.month,
                  isChoose: li.isChoose,
                })
              })
            }
            arr.push({
              text: item.year + '年',
              value: item.year,
              isChoose: item.isChoose,
              monthList: [{ text: '全部', value: '' }, ...arr2],
            })
          })
          this.yearOptions = arr
          const arr1 = arr.filter(item => {
            return item.isChoose
          })
          this.yearData = arr1[0].value
          this.monthOptions = arr1[0].monthList
          this.monthData = this.monthOptions[0].value
          this.getPersonTable()
        }
      })
    },
    getTypeList() {
      getTypeList().then(res => {
        if (res.status === 200) {
          const arr = []
          res.data.forEach(item => {
            arr.push({
              text: item.typeName,
              value: item.typeId,
            })
          })
          this.holidayOptions = arr
          this.holidayData = arr[0].value
          this.filterList = res.data[0].children
          this.activeStatusInfo = arr[0]
          this.getPersonTable()
        }
      })
    },
    yearChange() {
      const arr = this.yearOptions.filter(item => {
        return item.value === this.yearData
      })
      this.monthOptions = arr[0].monthList
      this.monthData = this.monthOptions[0].value
      this.getPersonTable()
    },
    monthChange() {
      // console.log(this.monthData)
      this.getPersonTable()
    },
    backChange() {
      // console.log(this.backType)
      this.getPersonTable()
    },
    holidayChange() {
      console.log(this.holidayData)
      const arr = this.holidayOptions.filter(item => {
        return item.value === this.holidayData
      })
      this.activeStatusInfo = arr[0]
      this.getPersonTable()
    },
  },
}
</script>

<style lang="scss" scoped>
.gather_duty {
  /deep/ .van-popup {
    position: absolute;
  }
  /deep/.van-dropdown-menu__bar {
    height: 38px;
    box-shadow: none;
  }
  .gather_duty_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .duty_title_left {
      width: 50%;
    }
    .duty_title_center {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      /deep/.van-dropdown-menu__title {
        font-size: 14px;
      }
    }
  }
  .gather_main {
    .gather_main_top {
      display: flex;
      align-items: center;
      height: 35px;
      padding: 0 15px;
      border-bottom: 1px solid #efefef;
      p {
        width: 50%;
      }
    }
    .gather_main_title {
      font-weight: bold;
    }
    .gather_statics {
      padding: 10px 15px;
      .head {
        margin-bottom: 16px;
        position: relative;
        display: flex;
        align-items: center;
        /deep/.van-dropdown-menu__bar {
          height: 25px;
        }
        .one_count {
          margin-left: 10px;
          background-color: #fdeed7;
          border-radius: 2px;
          padding: 3px 10px;
        }
        .icon {
          position: absolute;
          right: 10px;
          top: 0;
          color: #333;
          display: flex;
          align-items: center;
          .iconfont {
            font-size: 18px;
          }
          .choose_i {
            color: #409eff;
          }
          .refresh {
            margin-right: 23px;
            font-size: 13px;
          }
        }
      }
    }
    .statics_box {
      color: #333;
      .infos_one_gather {
        // display: flex;
        // justify-content: space-between;
        // align-items: center;
        // height: 30px;
        // border-bottom: 1px solid #efefef;
        background-color: #f7f7f7;
        margin-bottom: 10px;
        padding: 5px;
        p {
          line-height: 20px;
          padding-left: 5px;
        }
      }
      .boder_circle {
        height: 7px;
        width: 7px;
        border-radius: 50%;
        background-color: #942733;
        display: inline-block;
      }
      .gather_status {
        color: #ff0000;
      }
      .extra {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .desc {
          color: #7f7f7f;
          font-size: 12px;
        }
      }
    }
    // 周期切换
    .tab_con_tabs {
      display: flex;
      align-items: center;
      padding: 8px 8px;
      border-bottom: 1px solid #efefef;
      // flex-wrap: wrap;
      // overflow-x: auto;
      overflow-x: scroll;
      word-break: keep-all;
      -webkit-overflow-scrolling: touch;
      &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        border-radius: 1px;
      }
      .tab_li {
        font-size: 12px;
        color: #333333;
        border-radius: 2px;
        padding: 4px 8px;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-right: 5px;
        &.active {
          background-color: #f4f6f8;
          font-weight: bold;
        }
        .li_name {
          font-size: 12px;
        }
      }
    }
  }
}

.filter_pop {
  display: flex;
  flex-direction: column;
  height: 60%;
  overflow: hidden;
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    // font-size: 14px;
    background-color: #f5f6fa;
    .title {
      font-size: 16px;
      color: #333;
    }
  }
  .filter_list {
    flex: 1;
    font-size: 14px;
    text-align: center;
    // margin-top: 16px;
    padding: 12px 0;
    overflow-y: auto;
    .li {
      padding: 12px 12px;
    }
    .li_choose {
      color: #e1af54;
    }
    /deep/.van-radio {
      justify-content: center;
      .van-radio__icon {
        height: auto;
        font-size: 18px;
      }
    }
  }
}
</style>
